<template>
  <PageContainer>
    <view class="container">
      <Header title="取消报名详情" />
      <Loading v-model="loading">
        <view class="pa-12">
          <RegisterInfoView
            :register-info="registerInfo"
            :activity-info="activityInfo"
            :applicant-info="applicantInfo"
            @refresh="refresh"
          >
            <template>
              <TButton
                text="详细信息"
                type="none"
                :icon="'\ue8bf'"
                :customStyle="{
                  display: 'inline-block',
                  backgroundColor: '#F2F3F5',
                  color: '#333333',
                  marginLeft: '24rpx',
                }"
                custom-class="h-24 linh-24 br-12"
                @click="toRegisterFormForm"
              />
            </template>
          </RegisterInfoView>
          <CellBox title="取消申请信息" :list="refundInfo" />
          <CellBox title="报名提交信息" :list="applicantInfo" />
        </view>
        <TButtonGroup>
          <TButton
            class="gutter-btn"
            type="warn"
            text="驳回申请"
            :icon="'\ueaf2'"
            @click="showModal('reject')"
          />
          <TButton
            class="gutter-btn"
            type="primary"
            text="通过申请"
            :icon="'\ue60d'"
            @click="showModal('pass')"
          />
        </TButtonGroup>
        <ShowModal
          v-model="modalVisible"
          :title="modalTitle"
          content-width="100%"
          :confirm-text="modalConfirmText"
          :confirm-color="modalConfirmColor"
          @confirm="onSubmit"
        >
          <template #content>
            <view class="pa-20" style="width: 100%">
              <view v-if="modalTips" class="pb-16 fz-14" style="color: #999996">
                {{ modalTips }}
              </view>
              <view v-if="status == RefundApplyStatus.Approved" class="pb-16 fz-14">
                确定要通过TA的取消报名申请吗？
              </view>
              <view
                v-if="status == RefundApplyStatus.Rejected"
                class="pb-16 fz-14"
                style="color: #999996"
              >
                告知一下用户为什么会被驳回吧
              </view>
              <view style="background-color: #f2f3f5" v-if="status == RefundApplyStatus.Rejected">
                <UniEasyinput v-model="remark" type="textarea" placeholder="请输入审核说明" />
              </view>
            </view>
          </template>
        </ShowModal>
      </Loading>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* refundExamineDetail 退票申请详情 */
  import { auditRegisterRefundApply, selectRefundApplyDetail } from '@/api/activity';
  import type { ActivityRegisterTicketUnion, ActivityShortDetailVo } from '@/api/order/types';
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import Loading from '@/components/Loading/index.vue';
  import RegisterInfoView from '../../../components/RegisterInfoView.vue';
  import CellBox, { type ListItem as CellBoxListItem } from '../../../components/CellBox.vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import ShowModal from '@/components/ShowModal/index.vue';
  import { navigateBack, navigateTo, onLoad } from '@/router';
  import { ref } from 'vue';
  import { RegisterTypeText, getApprovalStatusText } from '@/api/activity/types';
  import { Toast } from '@/utils';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import { ApprovalStatusEnum, RefundApplyStatus } from '@/enums/activityStatusEnum';
  import { onPullDownRefresh } from '@dcloudio/uni-app';
  import type { RefundExamineDetail } from '@/router/types/modules';
  import { formatMoney } from '@/utils/number';

  const loading = ref(true);
  const registerInfo = ref<ActivityRegisterTicketUnion>();
  const activityInfo = ref<ActivityShortDetailVo>();

  const applicantInfo = ref<CellBoxListItem[]>([]);

  const refundInfo = ref<CellBoxListItem[]>([]);
  const registerId = ref();
  let success: RefundExamineDetail['success'];
  onLoad<'refundExamineDetail'>((op) => {
    registerId.value = op.registerId;
    success = op.success;
    __init(op.registerId);
  });

  async function __init(registerId?: number) {
    loading.value = true;
    const id = registerInfo.value?.id as number;
    const { activityRegisterUserTicketVo: registerInfoVo } = await selectRefundApplyDetail(
      registerId || id,
    );
    registerInfo.value = registerInfoVo;
    activityInfo.value = { activityId: registerInfoVo.activityUnionId } as ActivityShortDetailVo;

    const statusObj = getApprovalStatusText.get(registerInfoVo.approvalStatus);
    const personInfo = `${registerInfoVo.gmatName} ${registerInfoVo.gmatPhone}`;
    applicantInfo.value = [
      {
        label: '报名提交人',
        value:
          registerInfoVo.registerType === 'batch'
            ? RegisterTypeText[registerInfoVo.registerType]
            : personInfo,
      },
      { label: '报名时间', value: registerInfoVo.createTime },
      { label: '报名状态', value: statusObj?.text, valueColor: statusObj?.color },
      { label: '报名来源', value: RegisterTypeText[registerInfoVo.registerType] },
      { label: '报名类型', value: registerInfoVo.ticketName },
    ];

    if (registerInfoVo.totalDiscountMoney > 0) {
      applicantInfo.value.push({
        label: `会员优惠`,
        value: `-${formatMoney({ money: registerInfoVo.totalDiscountMoney })}`,
      });
    }

    if (registerInfoVo.totalMoney > 0) {
      applicantInfo.value.push({
        label: '费用总价',
        value: formatMoney({ money: registerInfoVo.totalMoney }),
      });
      applicantInfo.value.push({
        label: '实付金额',
        value: formatMoney({ money: registerInfoVo.payMoney }),
        valueColor: '#EA5E0E',
      });
    }

    refundInfo.value = [
      {
        label: '取消提交人',
        value: registerInfoVo.cancelPersonName + ' ' + registerInfoVo.cancelPersonTel,
      },
      { label: '提交时间', value: registerInfoVo.cancelTime },
      {
        label: '取消原因',
        value: registerInfoVo.cancelReason,
      },
    ];

    if (
      registerInfoVo.approvalStatus !== ApprovalStatusEnum.UNDERREVIEW &&
      registerInfoVo.verifyTime &&
      registerInfoVo.registerType !== 'batch'
    ) {
      applicantInfo.value.push({ label: '审核时间', value: registerInfoVo.verifyTime });
    }

    loading.value = false;
    uni.stopPullDownRefresh();
  }

  function refresh() {
    success?.();
    __init();
  }

  function toRegisterFormForm() {
    navigateTo({
      name: 'activityRegisterForm',
      options: {
        activityId: activityInfo.value?.activityId,
        id: registerInfo.value?.id as number,
        type: 'activityManage',
      },
    });
  }

  // 审核

  const modalVisible = ref(false);
  const modalTitle = ref('');
  const modalConfirmText = ref('');
  const modalConfirmColor = ref('');
  const modalTips = ref('');
  const status = ref<RefundApplyStatus>(RefundApplyStatus.Approved);
  const remark = ref('');

  function showModal(type: 'pass' | 'reject' | 'termination') {
    modalTips.value = '';
    if (type === 'pass') {
      modalTitle.value = '通过取消报名申请';
      modalConfirmText.value = '通过申请';
      modalConfirmColor.value = '#2878FF';
      status.value = RefundApplyStatus.Approved;
    }
    if (type === 'reject') {
      modalTitle.value = '驳回取消报名申请';
      modalConfirmText.value = '立即驳回';
      modalConfirmColor.value = '#EA5E0E';
      status.value = RefundApplyStatus.Rejected;
    }

    modalVisible.value = true;
  }

  async function onSubmit() {
    await auditRegisterRefundApply({
      registerId: registerId.value,
      status: status.value,
      remarks: remark.value,
    });
    Toast({
      duration: 1000,
      title: `${
        status.value === RefundApplyStatus.Approved ? '已通过取消报名申请' : '已驳回取消报名申请'
      }`,
      success: () => {
        navigateBack();
        success?.();
      },
    });
  }

  onPullDownRefresh(() => __init());
</script>

<style lang="scss" scoped></style>
